<template>
  <div class="news-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button @click="handleBack" :icon="ArrowLeft" type="primary" plain> 返回列表 </el-button>
    </div>

    <!-- 文章主体 -->
    <el-card class="news-card" shadow="never">
      <!-- 文章标题 -->
      <h1 class="news-title">{{ newsDetail.title }}</h1>

      <!-- 文章元信息 -->
      <div class="news-meta">
        <div class="meta-left">
          <el-tag type="primary" size="small">{{ newsDetail.category }}</el-tag>
          <span class="author">
            <el-icon><User /></el-icon>
            {{ newsDetail.author }}
          </span>
          <span class="publish-time">
            <el-icon><Clock /></el-icon>
            {{ formatTime(newsDetail.publishTime) }}
          </span>
        </div>
        <div class="meta-right">
          <span class="view-count">
            <el-icon><View /></el-icon>
            {{ newsDetail.viewCount }} 阅读
          </span>
        </div>
      </div>

      <!-- 文章封面图 -->
      <div class="news-cover" v-if="false">
        <el-image :src="newsDetail.cover" :alt="newsDetail.title" fit="cover" class="cover-image" />
      </div>

      <!-- 文章摘要 -->
      <div class="news-summary" v-if="newsDetail.summary">
        <el-alert :title="newsDetail.summary" type="info" :closable="false" show-icon />
      </div>

      <!-- 文章内容 -->
      <div class="news-content" v-html="newsDetail.content"></div>

      <!-- 文章标签 -->
      <div class="news-tags" v-if="newsDetail.tags && newsDetail.tags.length">
        <span class="tags-label">标签：</span>
        <el-tag v-for="tag in newsDetail.tags" :key="tag" size="small" class="tag-item">
          {{ tag }}
        </el-tag>
      </div>

      <!-- 操作按钮 -->
      <div class="news-actions">
        <el-button @click="toggleLike" :type="isLiked ? 'danger' : 'default'" :icon="isLiked ? StarFilled : Star"> {{ isLiked ? '已收藏' : '收藏' }} ({{ newsDetail.likeCount }}) </el-button>
        <el-button @click="shareNews" :icon="Share" type="primary" plain> 分享 </el-button>
        <el-button @click="showComments" :icon="ChatDotRound" v-if="false"> 评论 ({{ newsDetail.commentCount }}) </el-button>
      </div>
    </el-card>

    <!-- 相关文章推荐 -->
    <el-card class="related-news" shadow="never" v-if="false">
      <template #header>
        <h3>相关推荐</h3>
      </template>
      <div class="related-list">
        <div v-for="item in relatedNews" :key="item.id" class="related-item" @click="viewRelatedNews(item.id)">
          <el-image :src="item.thumbnail" :alt="item.title" class="related-thumbnail" fit="cover" />
          <div class="related-info">
            <h4 class="related-title">{{ item.title }}</h4>
            <p class="related-summary">{{ item.summary }}</p>
            <div class="related-meta">
              <span>{{ formatTime(item.publishTime) }}</span>
              <span>{{ item.viewCount }} 阅读</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 评论区域 -->
    <el-card class="comments-section" shadow="never" v-if="showCommentsSection">
      <template #header>
        <h3>评论区 ({{ newsDetail.commentCount }})</h3>
      </template>

      <!-- 发表评论 -->
      <div class="comment-form">
        <el-input v-model="newComment" type="textarea" :rows="3" placeholder="请输入您的评论..." maxlength="500" show-word-limit />
        <div class="comment-actions">
          <el-button @click="submitComment" type="primary" :disabled="!newComment.trim()"> 发表评论 </el-button>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comments-list">
        <div v-for="comment in comments" :key="comment.id" class="comment-item">
          <el-avatar :src="comment.avatar" :alt="comment.username" size="small" />
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-username">{{ comment.username }}</span>
              <span class="comment-time">{{ formatTime(comment.createTime) }}</span>
            </div>
            <p class="comment-text">{{ comment.content }}</p>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ArrowLeft, User, Clock, View, Star, StarFilled, Share, ChatDotRound } from '@element-plus/icons-vue'

import http from '@/apis/news'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const newsDetail = ref({
  id: 1,
  title: '人工智能技术在',
  category: '科技前沿',
  author: '张博士',
  publishTime: '2024-01-15 10:30:00',
  viewCount: 1256,
  likeCount: 89,
  commentCount: 23,
  cover: 'http://www.kmdc.gov.cn/upload/resources/image/2025/09/02/3584484_500x500.jpg',
  summary: '本文深入探讨了人工智能在医疗诊断、药物研发、个性化治疗等领域的最新进展，分析了AI技术为医疗行业带来的革命性变化。',
  content: `
      <p>随着人工智能技术的快速发展，医疗领域正在经历一场前所未有的变革。从精准诊断到个性化治疗，AI技术正在重新定义现代医疗的边界。</p>
      
      <h3>AI在医疗诊断中的应用</h3>
      <p>深度学习算法在医学影像分析方面表现出色，能够识别X光片、CT扫描和MRI图像中的异常情况。研究表明，AI系统在某些疾病的诊断准确率已经超过了经验丰富的医生。</p>
      
      <h3>药物研发的新突破</h3>
      <p>传统的药物研发周期长达10-15年，成本高昂。AI技术通过分子建模、药物筛选和临床试验优化，大大缩短了研发周期，降低了成本。</p>
      
      <h3>个性化医疗的实现</h3>
      <p>基于患者的基因信息、病史和生活方式数据，AI可以为每个患者制定个性化的治疗方案，提高治疗效果，减少副作用。</p>
      
      <h3>未来展望</h3>
      <p>随着技术的不断进步，我们有理由相信，AI将在医疗领域发挥更加重要的作用，为人类健康事业做出更大贡献。</p>
    `,
  tags: ['人工智能', '医疗科技', '深度学习', '精准医疗', '药物研发']
})

const relatedNews = ref([
  {
    id: 2,
    title: '5G技术推动智慧医疗发展新篇章',
    summary: '探索5G网络如何为远程医疗和实时诊断提供技术支撑...',
    thumbnail: '/placeholder.svg?height=100&width=150',
    publishTime: '2024-01-14 15:20:00',
    viewCount: 892
  },
  {
    id: 3,
    title: '区块链技术在医疗数据安全中的应用',
    summary: '分析区块链如何保护患者隐私，确保医疗数据安全...',
    thumbnail: '/placeholder.svg?height=100&width=150',
    publishTime: '2024-01-13 09:45:00',
    viewCount: 654
  }
])

const comments = ref([
  {
    id: 1,
    username: '医学爱好者',
    avatar: '/placeholder.svg?height=40&width=40',
    content: '这篇文章写得很好，AI在医疗领域的应用确实前景广阔！',
    createTime: '2024-01-15 14:30:00'
  },
  {
    id: 2,
    username: '科技达人',
    avatar: '/placeholder.svg?height=40&width=40',
    content: '期待看到更多AI技术在实际医疗场景中的应用案例。',
    createTime: '2024-01-15 16:15:00'
  }
])

const isLiked = ref(false)
const showCommentsSection = ref(false)
const newComment = ref('')

// 方法
const handleBack = () => {
  ElMessage.success('返回文章列表')
  router.back()
}

const formatTime = (timeStr: string) => {
  const date = new Date(timeStr)
  return date.toLocaleString('zh-CN')
}

const toggleLike = () => {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    newsDetail.value.likeCount++
    ElMessage.success('收藏成功')
  } else {
    newsDetail.value.likeCount--
    ElMessage.info('取消收藏')
  }
}

const shareNews = () => {
  window.navigator.clipboard.writeText(window.location.href)
  ElMessageBox.alert('分享链接已复制到剪贴板', '分享成功', {
    confirmButtonText: '确定'
  })
}

const showComments = () => {
  showCommentsSection.value = !showCommentsSection.value
}

const submitComment = () => {
  if (!newComment.value.trim()) return

  const comment = {
    id: Date.now(),
    username: '当前用户',
    avatar: '/placeholder.svg?height=40&width=40',
    content: newComment.value,
    createTime: new Date().toISOString()
  }

  comments.value.unshift(comment)
  newComment.value = ''
  ElMessage.success('评论发表成功')
}

const viewRelatedNews = (id: number) => {
  ElMessage.info(`跳转到文章 ${id}`)
}

// 生命周期
onMounted(() => {
  if (route.query.id) {
    http.fetchById(route.query.id as string).then((response) => {
      let { code, message, result } = response.data
      if (code !== 200) {
        ElMessage.error(message)
        return
      }
      newsDetail.value = result
      //   console.log(result)
    })
  }
  // http.fetchById()
})
</script>

<style scoped>
.news-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  margin-bottom: 20px;
}

.news-card {
  margin-bottom: 20px;
}

.news-title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author,
.publish-time,
.view-count {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 14px;
}

.news-cover {
  margin-bottom: 20px;
}

.cover-image {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

.news-summary {
  margin-bottom: 25px;
}

.news-content {
  line-height: 1.8;
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
}

.news-content h3 {
  color: #303133;
  margin: 25px 0 15px 0;
  font-size: 20px;
}

.news-content p {
  margin-bottom: 15px;
}

.news-tags {
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tags-label {
  color: #909399;
  font-size: 14px;
}

.tag-item {
  margin: 0;
}

.news-actions {
  display: flex;
  gap: 15px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.related-news,
.comments-section {
  margin-bottom: 20px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.related-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.related-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.related-thumbnail {
  width: 120px;
  height: 80px;
  border-radius: 6px;
  flex-shrink: 0;
}

.related-info {
  flex: 1;
}

.related-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.related-summary {
  color: #909399;
  font-size: 14px;
  margin: 0 0 10px 0;
  line-height: 1.5;
}

.related-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #c0c4cc;
}

.comment-form {
  margin-bottom: 25px;
}

.comment-actions {
  margin-top: 10px;
  text-align: right;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-username {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.comment-time {
  color: #c0c4cc;
  font-size: 12px;
}

.comment-text {
  color: #606266;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .news-detail-container {
    padding: 15px;
  }

  .news-title {
    font-size: 24px;
  }

  .news-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .meta-left {
    flex-wrap: wrap;
  }

  .news-actions {
    flex-wrap: wrap;
  }

  .related-item {
    flex-direction: column;
  }

  .related-thumbnail {
    width: 100%;
    height: 150px;
  }
}
</style>
